---
title: マイグレーションガイド
---

# マイグレーションガイド

## RainbowKitのマイグレーション

### 2.x.x 破壊的な変更

[wagmi](https://wagmi.sh)と[viem](https://viem.sh)のピア依存関係が `2.x.x` に達し、破壊的な変更が行われました。

移行手順に従ってください。

**RainbowKit、`wagmi`、および`viem`を最新バージョンにアップグレードしてください**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**`@tanstack/react-query`のピア依存をインストール**

Wagmi v2では、[TanStack Query](https://tanstack.com/query/v5/docs/react/overview)が必須のピア依存関係です。

以下のコマンドでインストールしてください：

```bash
npm i @tanstack/react-query
```

**RainbowKit と Wagmi の設定をアップグレードしてください**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**`wagmi`と`viem`の破壊的変更を確認してください**

dAppで`wagmi`フックと`viem`アクションを使用している場合、v2の移行ガイドに従う必要があります：

- [Wagmi v2移行ガイド](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Viem v2破壊的変更](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### RainbowKitの変更点

**EIP-6963 ウォレットの動作改善**

新しい EIP-6963 接続標準をサポートするウォレット（<b>Rainbow</b>、<b>MetaMask</b> などを含む）は、ウォレットを接続する体験の間に `Installed` セクションに自動的に表示されるようになりました。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで dApps に接続できるようになります。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで dApps に接続できるようになります。

開発者は、エンドユーザーのために推奨ウォレットを強調するためにカスタムウォレットリストを完全にコントロールし続けます。`injectedWallet`と`walletConnectWallet`をリストに含めることを推奨します。

**getDefaultConfig を使用した Wagmi 設定**

この新しいAPIは設定体験を簡素化し、Wagmiの`createConfig`を直接使用する必要性を置き換えます。チェーン設定が簡素化され、`transports`の公開プロバイダが推論されます。

デフォルトのウォレットリストが自動的に含まれるため、`getDefaultWallets`や`connectorsForWallets`を使用する必要がなくなります。

インポートしたまたはカスタムウォレットコネクタを`wallets`に渡すことで、カスタムウォレットリストを作成できます。ウォレットコネクタをインスタンス化し、`projectId`と`chains`を渡す必要はありません。

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**RainbowKitProvider**

`<RainbowKitProvider>`に`chains`を渡す必要がなくなりました。

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**カスタムチェーン**

Wagmi v2に従い、`Chain`タイプが変更されましたが、RainbowKitの`iconUrl`や`iconBackground`メタデータを引き続きサポートします。

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

`getDefaultConfig`の例：

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

`createConfig`の例：

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**カスタムウォレット**

RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、[更新されたドキュメント](https://www.rainbowkit.com/docs/custom-wallets)および[サンプルコネクタ](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts)を参照してください。

ウォレットコネクタは今やEIP-6963標準を`rdns`プロップと共にサポートします。このプロップを適切に設定することにより、EIP-6963をサポートするウォレットがウォレットリストに二重に表示されることを避けることができます。

### 1.x.x 破壊的な変更

#### wagmi v1に更新

[wagmi](https://wagmi.sh) のピア依存関係が `1.x.x`に更新されました。

移行手順に従ってください。

**RainbowKitと`wagmi`を最新バージョンにアップグレード**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**viemのピア依存関係をインストールしてください**

wagmi v1 では `viem` のピア依存関係が必要です。以下のコマンドを使用してインストールしてください:

```bash
npm i viem
```

**バンドラとポリフィルの互換性を確保する**

プロジェクトの設定指南として[Next.js Webpack Config](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js)と[Create React App polyfills](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-create-react-app/src/polyfills.ts)のサンプルを参照してください。

ViteとRemixの追加フレームワークガイドは、 [here](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup)で利用できます。

`wagmi`の破壊的な変更を確認する\*\*

あなたのアプリケーションで`wagmi`のフックを使用している場合、`wagmi`のv1への移行ガイドに従う必要があります。

[ここで移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide)。

### 0.12.x破壊的な変更

wagmiのピア依存関係が`0.12.x`に更新されました。

RainbowKitは`wagmi`で`WalletConnectLegacyConnector`コネクタを採用し、WalletConnect v1のサポートを継続します。WalletConnect v2と`WalletConnectConnector`のサポートは、破壊的な変更なしに近くのパッチリリースで利用可能になります。

将来のリリースでは、ウォレットは自動的に移行されます。

すべてのdAppは今や[WalletConnect Cloud](https://cloud.walletconnect.com/)から`projectId`を取得し、WalletConnect v2を有効にする必要があります。これは、2023年6月28日にWalletConnect v1のブリッジサーバーがシャットダウンされる前に完了する必要があります。`projectId`が指定されなかった場合、RainbowKitは静かにv1をすべてのウォレットに優先します。

移行手順に従ってください。

#### RainbowKitと`wagmi`を最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### WalletConnect CloudのprojectIdを提供します

WalletConnectに依存するすべてのdAppは現在、[WalletConnect Cloud](https://cloud.walletconnect.com/)から`projectId`を取得する必要があります。これは完全に無料で、数分で完了します。

`getDefaultWallets`と個々のRainbowKitウォレットコネクタに`projectId`を提供します。次のように:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.xの破壊的な変更

wagmiのピア依存関係が`0.11.x`に更新されました。

移行手順に従ってください。

#### RainbowKitと`wagmi`を最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### `wagmi`の破壊的な変更を確認する

あなたのアプリケーションで`wagmi`のフックを使用している場合、あなたのアプリケーションが`wagmi`の破壊的な変更の影響を受けているかどうかを確認する必要があります。

[ここで移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide#011x-breaking-changes)。

### 0.10.x破壊的な変更

wagmiのピア依存関係が`0.10.x`に更新されました。

移行手順に従ってください。

#### RainbowKitと`wagmi`を最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### `wagmi`の破壊的な変更を確認する

あなたのアプリケーションで`wagmi`のフックを使用している場合、あなたのアプリケーションが`wagmi`の破壊的な変更の影響を受けているかどうかを確認する必要があります。

[ここで移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide#010x-breaking-changes)。

### 0.9.x破壊的な変更

wagmiのピア依存関係が`0.9.x`に更新されました。

移行手順に従ってください。

#### RainbowKitと`wagmi`を最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### `wagmi`の破壊的な変更を確認する

あなたのアプリケーションで`wagmi`のフックを使用している場合、あなたのアプリケーションが`wagmi`の破壊的な変更の影響を受けているかどうかを確認する必要があります。

[ここで移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide#09x-breaking-changes)。

### 0.8.x破壊的な変更

wagmiのピア依存関係が`0.8.x`に更新されました。

移行手順に従ってください。

#### RainbowKitと`wagmi`を最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### `wagmi`の破壊的な変更を確認する

あなたのアプリケーションで`wagmi`のフックを使用している場合、あなたのアプリケーションが`wagmi`の破壊的な変更の影響を受けているかどうかを確認する必要があります。

[こちらで移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide#08x-breaking-changes)。

### 0.7.x破壊的な変更

カスタムウォレットリストを作成する場合、バンドルサイズを削減するために、各ウォレットを個別にインポートする必要があります。ウォレットがもはや`wallet`オブジェクトを介して名前空間化されなくなったため、すべてのウォレットに`Wallet`接尾辞がついたことに注意してください。

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

また、Steakwalletの下位互換性レイヤーが削除されたことに注意してください。代わりにOmniを使用すべきです。

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x破壊的な変更

RainbowKitは`wagmi`のピア依存関係を`0.5.x`に更新しました。

移行手順に従ってください。

#### 依存関係のアップグレード

RainbowKitとwagmiを最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### `wagmi`の破壊的な変更を確認する

あなたのアプリケーションで`wagmi`のフックを使用している場合、あなたのアプリケーションが`wagmi`の破壊的な変更の影響を受けているかどうかを確認する必要があります。

[ここで彼らの移行ガイドを見ることができます](https://wagmi.sh/react/migration-guide#05x-breaking-changes)。

### 0.3.xの破壊的な変更

`Wallet` タイプの `createConnector` から `chainId` パラメータを削除しました。

**注意：すべての組み込みウォレットは新しいAPIを使用しています。大多数の消費者には影響しません。これは、[カスタムウォレット](/docs/custom-wallets)を作成/消費した消費者のみに影響します。**

`createConnector`の`chainId`から以前にRPCのURLを導出していた場合、`wagmi`が`configureChains`と一緒に使用されるときに内部的にRPCのURLを処理するようになったので、そのロジックを削除できます。

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x ブレーキングチェンジ

RainbowKitは`wagmi`のピア依存性を`^0.4`に更新しました。

移行手順に従ってください。

#### 依存関係のアップグレード

RainbowKitとwagmiを最新バージョンにアップグレードします

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### configureChainsのインポートを置き換える

RainbowKitの代わりにwagmiから`configureChains`をインポートします：

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### プロバイダーを移行する

RainbowKitはもはや`apiProvider` APIをエクスポートしません。wagmiから望ましいプロバイダーに置き換えてください。

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### アルケミー

`wagmi/providers/alchemy`から`alchemyProvider`をインポートします。

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

`wagmi/providers/infura`から`infuraProvider`をインポートします。

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

`wagmi/providers/jsonRpc`から`jsonRpcProvider`をインポートします。

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### 公開プロバイダ

`wagmi/providers/public`から`publicProvider`をインポートします。

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### wagmiのプロバイダの名前を変更する

`WagmiProvider`を`WagmiConfig`にリネームします。

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

完了です！ 🌈
